<template>
  <div class="app">
    <li v-for="(item, index) in arr" :key="index" style="display: inline-block">
      <input type="checkbox" v-model="sumArr" :value="item" /><span>{{ item }}</span>
    </li>
    <button @click.prevent="pre">打印</button>
    <p>总计数：{{ sum }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arr: [1, 2, 3, 4, 5, 6, 7],
      sumArr: []
    }
  },
  methods: {
    pre () {
      console.log(this.sumArr)
    }
  },
  computed: {
    sum () {
      return this.sumArr.reduce(function (sum, value) {
        return (sum += value)
      }, 0)
    }
  }
}
</script>

<style></style>
